<template>
  <div class="goodsMall">
    <!-- 精品推荐 -->
    <div class="recommend-content">
      <div class="head">
        <h2>
          <img src="../assets/img/jingpin.png" alt="" />
          精品推荐
        </h2>
        <span class="more">
          更多
          <img src="../assets/img/arrow.png" alt="" />
        </span>
      </div>
      <div class="shop-content">
        <ul>
          <li v-for="(item, index) in productRec">
            <img
              v-show="item.isHotSale === 1"
              class="section-info"
              src="../assets/img/section_hot.png"
              alt=""
            />
            <img
              v-show="item.isLatest === 1"
              class="section-info"
              src="../assets/img/section_new.png"
              alt=""
            />
            <img :src="`http://sc.wolfcode.cn/${item.coverImg}`" alt="" />
            <div class="shop-info">
              <h4>{{ item.name }}</h4>
              <div class="monad">
                <span>{{ item.coin }}</span>
                <img src="../assets/img/monad.png" alt="" />
              </div>
              <div class="btn-duihuan">立即兑换</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 热门兑换 -->
    <div class="hot-content">
      <div class="head">
        <h2>
          <img src="../assets/img/hot.png" alt="" />
          热门兑换
        </h2>
        <span class="more">
          更多
          <img src="../assets/img/arrow.png" alt="" />
        </span>
      </div>
      <div class="shop-content">
        <ul>
          <li v-for="(item, index) in productHot">
            <img
              v-show="item.isHotSale === 1"
              class="section-info"
              src="../assets/img/section_hot.png"
              alt=""
            />
            <img
              v-show="item.isLatest === 1"
              class="section-info"
              src="../assets/img/section_new.png"
              alt=""
            />
            <img :src="`http://sc.wolfcode.cn/${item.coverImg}`" alt="" />
            <div class="shop-info">
              <h4>{{ item.name }}</h4>
              <div class="monad">
                <span>{{ item.coin }}</span>
                <img src="../assets/img/monad.png" alt="" />
              </div>
              <div class="btn-duihuan">立即兑换</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productRec: null,
      productHot: null,
    };
  },
  created() {
    // 获取推荐商品列表
    this.$store.dispatch("getProductREC").then(res => {
      this.productRec = this.$store.state.productRec;
    });
    // 获取热门兑换商品列表
    this.$store.dispatch("getProductHOT").then(res => {
      this.productHot = this.$store.state.productHot;
    });
  },
};
</script>

<style lang="less" scoped>
.goodsMall {
  width: 100%;
  background: #f5f5f5;
  .recommend-content {
    width: 1200px;
    padding-top: 50px;
    margin: 0 auto;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        img {
          margin-right: 10px;
        }
        display: flex;
        font-size: 30px;
        align-items: center;
      }
      .more {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #666;
        img {
          margin-left: 8px;
        }
      }
    }
    .shop-content {
      ul {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        li {
          position: relative;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          background: #fff;
          width: 285px;
          height: 500px;
          text-align: center;
          cursor: pointer;
          transition: 0.8s all;
          &:hover {
            transform: translateY(-8px);
            .btn-duihuan {
              background: #0a328e;
              color: #fff !important;
              font-weight: 300;
            }
          }
          .section-info {
            position: absolute;
            left: 0;
          }
          .shop-info {
            height: 170px;
            h4 {
              margin-top: 20px;
              font-weight: 300;
              color: #333;
              font-size: 18px;
            }
            .monad {
              margin-top: 20px;
              span {
                color: #fd604d;
                font-size: 18px;
                font-weight: 700;
              }
              img {
                width: 20px;
                height: 20px;
              }
            }
            // 兑换按钮
            .btn-duihuan {
              width: 100px;
              height: 36px;
              margin: 20px auto 0;
              line-height: 36px;
              font-size: 18px;
              color: #0a328e;
              border: 1px solid #0a328e;
              font-weight: 300;
            }
          }
        }
      }
    }
  }
  .hot-content {
    width: 1200px;
    padding-top: 50px;
    margin: 0 auto;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        img {
          margin-right: 10px;
        }
        display: flex;
        font-size: 30px;
        align-items: center;
      }
      .more {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #666;
        img {
          margin-left: 8px;
        }
      }
    }
    .shop-content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 30px;
        li {
          position: relative;
          margin-top: 40px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          background: #fff;
          width: 285px;
          height: 500px;
          text-align: center;
          cursor: pointer;
          transition: 0.8s all;
          &:hover {
            transform: translateY(-8px);
            .btn-duihuan {
              background: #0a328e;
              color: #fff !important;
              font-weight: 300;
            }
          }
          .section-info {
            position: absolute;
            left: 0;
          }
          .shop-info {
            height: 170px;
            h4 {
              margin-top: 20px;
              font-weight: 300;
              color: #333;
              font-size: 18px;
            }
            .monad {
              margin-top: 20px;
              span {
                color: #fd604d;
                font-size: 18px;
                font-weight: 700;
              }
              img {
                width: 20px;
                height: 20px;
              }
            }
            // 兑换按钮
            .btn-duihuan {
              width: 100px;
              height: 36px;
              margin: 20px auto 0;
              line-height: 36px;
              font-size: 18px;
              color: #0a328e;
              border: 1px solid #0a328e;
              font-weight: 300;
            }
          }
        }
      }
    }
  }
}
</style>
